(function () {
	// for sticky table of contents
	const tocBody = document.querySelector(".docs-aside #js-toc-panel");
	const options = {
		root: null,
		rootMargin: `0px 0px -90% 0px`,
		threshold: 1.0,
	};
	const activeClassName = "active";
	const observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				const activeAnchor = tocBody.querySelector(
					`a.${activeClassName}`,
				);
				if (activeAnchor) {
					activeAnchor.parentNode.classList.remove(activeClassName);
					activeAnchor.classList.remove(activeClassName);
				}

				const nextActiveAnchor = tocBody.querySelector(
					`a[href="#${entry.target.id}"]`,
				);
				if (nextActiveAnchor) {
					nextActiveAnchor.parentNode.classList.add(activeClassName);
					nextActiveAnchor.classList.add(activeClassName);
				}
			}
		});
	}, options);
	if (window.matchMedia("(min-width: 1400px)").matches) {
		document
			.querySelectorAll(
				"#main > div > h2[id], #main > div > h3[id], #main > div > h4[id]", // only h2, h3, h4 are shown in toc
			)
			.forEach(el => observer.observe(el));
	}
})();

(function () {
	var toc_trigger = document.getElementById("js-toc-label"),
		toc = document.getElementById("js-toc-panel"),
		body = document.getElementsByTagName("body")[0],
		open = false;

	if (toc && matchMedia) {
		const mq = window.matchMedia("(max-width: 1023px)");
		mq.addEventListener("change", WidthChange);
		WidthChange(mq);
	}

	// media query change
	function WidthChange(mq) {
		if (mq.matches && toc_trigger) {
			let text = toc_trigger.innerText;
			let headingButton = document.createElement("button");
			headingButton.setAttribute("aria-expanded", "false");
			headingButton.innerText = text;
			toc_trigger.innerHTML = "";

			toc_trigger.appendChild(headingButton);
			headingButton.innerHTML += `<svg class="toc-trigger-icon" width="12" height="8" aria-hidden="true" focusable="false" viewBox="0 0 12 8"><g fill="none"><path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z"/><path d="M-6-8h24v24h-24z"/></g></svg>`;

			toc.setAttribute("data-open", "false");
			toc_trigger.setAttribute("aria-expanded", "false");
			headingButton.addEventListener("click", toggleTOC, true);
		} else {
			toc_trigger.innerHTML = "Table of Contents";
			toc.setAttribute("data-open", "true");
		}
	}

	function toggleTOC(e) {
		if (!open) {
			this.setAttribute("aria-expanded", "true");
			toc.setAttribute("data-open", "true");
			open = true;
		} else {
			this.setAttribute("aria-expanded", "false");
			toc.setAttribute("data-open", "false");
			open = false;
		}
	}
})();

(function () {
	var nav_trigger = document.getElementById("nav-toggle"),
		nav = document.getElementById("nav-panel"),
		body = document.getElementsByTagName("body")[0],
		open = false;

	if (matchMedia) {
		const mq = window.matchMedia("(max-width: 1023px)");
		mq.addEventListener("change", WidthChange);
		WidthChange(mq);
	}

	// media query change
	function WidthChange(mq) {
		if (mq.matches) {
			nav.setAttribute("data-open", "false");
			nav_trigger.removeAttribute("hidden");
			nav_trigger.setAttribute("aria-expanded", "false");
			nav_trigger.addEventListener("click", togglenav, false);
		} else {
			nav.setAttribute("data-open", "true");
			nav_trigger.setAttribute("hidden", "");
			nav_trigger.setAttribute("aria-expanded", "true");
		}
	}

	function togglenav(e) {
		if (!open) {
			this.setAttribute("aria-expanded", "true");
			nav.setAttribute("data-open", "true");
			open = true;
		} else {
			this.setAttribute("aria-expanded", "false");
			nav.setAttribute("data-open", "false");
			open = false;
		}
	}
})();

(function () {
	var index_trigger = document.getElementById("js-docs-index-toggle"),
		index = document.getElementById("js-docs-index-panel"),
		body = document.getElementsByTagName("body")[0],
		open = false;

	if (matchMedia) {
		const mq = window.matchMedia("(max-width: 1023px)");
		mq.addEventListener("change", WidthChange);
		WidthChange(mq);
	}

	function WidthChange(mq) {
		initIndex();
	}

	function toggleindex(e) {
		if (!open) {
			this.setAttribute("aria-expanded", "true");
			index.setAttribute("data-open", "true");
			open = true;
		} else {
			this.setAttribute("aria-expanded", "false");
			index.setAttribute("data-open", "false");
			open = false;
		}
	}

	function initIndex() {
		if (index_trigger) {
			index_trigger.removeAttribute("hidden");
			index_trigger.setAttribute("aria-expanded", "false");
			index.setAttribute("data-open", "false");

			index.setAttribute("data-open", "false");
			index_trigger.addEventListener("click", toggleindex, false);
		}
	}
})();

(function () {
	var switchers = document.querySelectorAll(".switcher"),
		fallbacks = document.querySelectorAll(".switcher-fallback");

	if (fallbacks != null) {
		fallbacks.forEach(el => {
			el.setAttribute("hidden", "");
		});
	}

	if (switchers != null) {
		switchers.forEach(element => {
			element.removeAttribute("hidden");
			const select = element.querySelector("select");

			select.addEventListener("change", function () {
				var selected = this.options[this.selectedIndex];
				url = selected.getAttribute("data-url");

				window.location.href = url;
			});
		});
	}
})();

// add utilities
var util = {
	keyCodes: {
		UP: 38,
		DOWN: 40,
		LEFT: 37,
		RIGHT: 39,
		HOME: 36,
		END: 35,
		ENTER: 13,
		SPACE: 32,
		DELETE: 46,
		TAB: 9,
	},

	generateID: function (base) {
		return base + Math.floor(Math.random() * 999);
	},

	getDirectChildren: function (elm, selector) {
		return Array.prototype.filter.call(elm.children, function (child) {
			return child.matches(selector);
		});
	},
};

(function (w, doc, undefined) {
	var CollapsibleIndexOptions = {
		allCollapsed: false,
		icon: '<svg class="index-icon" width="12" height="8" aria-hidden="true" focusable="false" viewBox="0 0 12 8"><g fill="none"><path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z"/><path d="M-6-8h24v24h-24z"/></g></svg>',
	};
	var CollapsibleIndex = function (inst, options) {
		var _options = Object.assign(CollapsibleIndexOptions, options);
		var el = inst;
		var indexToggles = el.querySelectorAll(
			".docs-index .docs__index__panel > ul > .docs-index__item[data-has-children] > a",
		); // only top-most level
		var indexPanels = el.querySelectorAll(
			".docs-index .docs__index__panel > ul > .docs-index__item>[data-child-list]",
		); // the list
		var accID = util.generateID("c-index-");

		var init = function () {
			el.classList.add("index-js");

			setupindexToggles(indexToggles);
			setupindexPanels(indexPanels);
		};

		var setupindexToggles = function (indexToggles) {
			Array.from(indexToggles).forEach(function (item, index) {
				var $this = item;

				$this.setAttribute("role", "button");
				$this.setAttribute("id", accID + "__item-" + index);
				$this.innerHTML += _options.icon;

				if (_options.allCollapsed)
					$this.setAttribute("aria-expanded", "false");
				else $this.setAttribute("aria-expanded", "true");

				$this.addEventListener("click", function (e) {
					e.preventDefault();
					togglePanel($this);
				});
			});
		};

		var setupindexPanels = function (indexPanels) {
			Array.from(indexPanels).forEach(function (item, index) {
				let $this = item;

				$this.setAttribute("id", accID + "__list-" + index);
				$this.setAttribute(
					"aria-labelledby",
					accID + "__item-" + index,
				);
				if (_options.allCollapsed)
					$this.setAttribute("aria-hidden", "true");
				else $this.setAttribute("aria-hidden", "false");
			});
		};

		var togglePanel = function (toggleButton) {
			var thepanel = toggleButton.nextElementSibling;

			if (toggleButton.getAttribute("aria-expanded") == "true") {
				toggleButton.setAttribute("aria-expanded", "false");
				thepanel.setAttribute("aria-hidden", "true");
			} else {
				toggleButton.setAttribute("aria-expanded", "true");
				thepanel.setAttribute("aria-hidden", "false");
			}
		};

		init.call(this);
		return this;
	}; // CollapsibleIndex()

	w.CollapsibleIndex = CollapsibleIndex;
})(window, document);

// init
var index = document.getElementById("docs-index");
if (index) {
	index = new CollapsibleIndex(index, {
		allCollapsed: false,
	});
}

document.addEventListener("DOMContentLoaded", () => {
	anchors.add(
		".docs-content h2:not(.c-toc__label), .docs-content h3, .docs-content h4",
	);
});
